<template>
  <div class="screen-container">

    <labelNavigation></labelNavigation>

    <!-- 内容展示区 -->
    <div class="scrren-body">
      <!-- 左侧导航区 -->
      <section class="left-each" >
        <button @click="((curIndex = index), (clickName = item.name))" :key="index"
        v-for="(item, index) in ListData"
        class="each" :class="{ active:index == curIndex }">
        {{item.name}}</button>
      </section>

      <!-- 名单信息区 -->
      <section class="right-name">
        <!-- 学生状态名单 -->
        <div class="right-top">
          <span class="top-left">已完成学生名单</span>
          <button class="top-right" @click="share">
            <i class="el-icon-share" style="font-size:26px"></i>
          </button>
        </div>

        <div class="right-bottom">
          <div class="bottom-name" :key="index" v-for="(item, index) in (verify[clickName])">{{item}}</div>
        </div>

        <div class="right-top">
          <span class="top-left">未完成学生名单</span>
          <button class="top-right" @click="share">
            <i class="el-icon-share" style="font-size:26px"></i>
          </button>
        </div>

        <div class="right-bottom">
          <div class="bottom-name" :key="index" v-for="(item, index) in (notverify[clickName])">{{item}}</div>
        </div>


      </section>

    </div>

    <!-- 分享功能 -->
    <div class="mask" v-if="sharePages">
      <div class="windows" v-if="sharePages">
        <div class="windows-top">
          <div class="top-left">分享到微信</div>
          <button class="top-right" @click="share">
            <i class="el-icon-close" style="font-size:24px"></i>
          </button>
        </div>
        <div class="windows-bottom">
          <div class="img"></div>
          <div>
            <span>微信扫描二维码，点击右上角</span>
            <span>🌰</span>
            <span>按钮</span>
          </div>
          <div>
            <span>分享给</span>
            <span style="color:#31c27c;">好友</span>
            <span>或</span>
            <span style="color:#31c27c;">朋友圈</span>

          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import labelNavigation from '../components/background/labelNavigation2'
import { getstudentManage, verifyModule, notVerifyModule } from "@/api/statistical/grow"

export default {
  components: {
    labelNavigation,
  },
  data() {
    return {
      Grade: '',
      clickName: '',
      ListData: [],
      verify: {},
      notverify: {},
      sharePages: false, // 分享页面
      curIndex: 0, // 获取点击导航栏索引值
    }
  },  
  mounted () {
    this.Grade = this.$route.query.galleryId
    this.getclasslist()
    this.getverifyModule()
    this.getnotVerifyModule()
  },
  methods: {
    share() {
      console.log(this.sharePages)
      this.sharePages = !this.sharePages
    },

    // 获取班级信息
    async getclasslist(){
      const res = await getstudentManage(this.Grade)
      if(res.rows.length===0){
        this.$message.warning("获取数据为空")
      }else if(res.rows===undefined){
        this.$message.error(res.msg);
      }else{
        for (const key in res.rows[0]) {
          this.ListData.push({ name: key, value: res.rows[0][key]})
        }
        this.clickName = this.ListData[0].name
        // console.log(this.ListData, 'ListData')
        // console.log(this.clickName, 'clickName')
        
      }
    },

    // 各模块完成的人的名字
    async getverifyModule() {
      const res = await verifyModule(this.Grade)
      // console.log(res, 'verifyModule')
      for(const index in res.rows[0]) {
        this.$set(this.verify, index, res.rows[0][index])
      }
      // console.log(this.verify, 'verify')
    },

    // 各模块完成的人的名字
    async getnotVerifyModule() {
      const res = await notVerifyModule(this.Grade)
      // console.log(res, 'notVerifyModule')
      for(const index in res.rows[0]) {
        this.$set(this.notverify, index, res.rows[0][index])
      }
      // console.log(this.notverify, 'notverify')
    },
  }
}
</script>

<style scoped>
.screen-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 图形展示区 */
.scrren-body {
  display: flex;
  margin: 0 13.75rem;
  flex-direction: row;
}

/* 左侧导航区 */
.left-each {
  display: flex;
  flex-direction: column;
  background: rgb(247, 248, 250);
  width: 13.75rem;
  height: 43.75rem;
  margin: 2.5rem;
}

.left-each .each {
  border: 1px solid #f7f8fa;
  padding: .875rem 0 .875rem 2.5rem;
  background: #fff;
}

.left-each .active{
  background: #7c0000;
  color: #ffffff;
}

/* 名单信息区 */
.right-name {
  display: flex;
  flex-direction: column;
  width: 45rem;
  height: 45rem;
  margin: 2.5rem;
  border: 2px solid #f5f5f5;
}

/* 学生状态名单 */
.right-top {
  padding: .625rem;
  border-radius: 5px;
}

/* 标签区 */
.right-top .top-left {
  padding: 0 .5rem .625rem .5rem;
  border-bottom: 2px solid #871616;
}
.right-top .top-right {
  float: right;
  font-size: 1rem;
  margin-right: .625rem;
  background: #ffffff;
  border: 0 solid #ffffff;
  color: rgb(135, 22, 22);
}

/* 学生姓名 */
.right-bottom {
  left: .0625rem;
  position: relative;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;  
  background: #fff;
  padding: .625rem 0 .3125rem 0;
  border-radius: 5px;
  border: 2px solid rgb(245, 245, 245, 1);
}

.bottom-name {
  padding: .625rem 1.875rem;
}

/* 分享功能 */
.mask{
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;

  background-color: rgba(56, 55, 55, 0.651);
  z-index: 9;
}

.windows {
  display: flex;
  flex-direction: column;
  margin-top: 6.25rem;
  width: 30%;
  height: 37.5rem;
  align-items: center;
  background-color: rgb(255, 255, 255);
}

.windows-top {
  width: 100%;
  display: flex;
  position: relative;
  border-bottom: 2px solid #f5f5f5;
}

.windows-top .top-left {
  padding: .75rem;
  margin: auto;
  font-size: 1rem;
}

.windows-top .top-right {
  top: .3125rem;
  right: .0625rem;
  position: absolute;


  font-size: 1.875rem;
  margin-right: 1.25rem;
  border: 0;
  padding: 0;
  background: #ffffff;
}

.windows-bottom {
  display: flex;
  text-align: center;
  flex-direction: column;
}

.windows-bottom .img{
  width: 12.5rem;
  height: 12.5rem; 
  margin: 2.5rem; 
  text-align: center;
  background: #f5f5f5; 
}

</style>
